<template>
    <div @mouseenter="stop" @mouseleave="start" class="content">
        <div :class="topState ? 'scrollTxt top30' : 'scrollTxt'">
            <p style="margin: 0px 0px" v-for="(item, index) in list" :key="index">
                <span :title="item.name">{{ item.name }}</span>
                <!-- <el-popover placement="top-start" title="标题"  trigger="hover" :content="item.name" >
                    <el-button slot="reference">{{item}}</el-button>
                </el-popover> -->
            </p>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            topState: false,//标识
            timer: null,//定时器
            list: [
                { id: 1, name: '王子妃' }, { id: 2, name: '喜欢朱墙樱' },
                { id: 3, name: '对，你没听错' }, { id: 4, name: '下一句忘记了，下次再说' }
            ],
            isHover: true,
            interval: 1500
        }
    },

    mounted() {
        // 开始滚动
        this.start()
    },

    methods: {
        // 开始滚动
        start() {
            this.timer = setInterval(() => {
                this.topState = true;
                setTimeout(() => {
                    this.list.push(this.list.shift());
                    this.topState = false;
                }, 500);
            }, this.interval)
        },

        // 停止滚动(清除定时器)
        stop() {
            if (this.isHover) {
                clearInterval(this.timer)
            }
        },
    }
}
</script>

<style scoped>
.content {
    height: 30px;
    overflow: hidden;
    cursor: pointer;
    width: 200px;
    margin: 0 auto;
}
.scrollTxt p {
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    text-align: center;
}

.top30 {
    transition: all 0.5s;
    margin-top: -30px;
}
</style>
